<template>
    <div class="chat-input-area">
        <div class="input-container">
            <el-input :value="modelValue" @input="$emit('update:modelValue', $event)" type="textarea" :rows="3"
                placeholder="输入您的问题或指令 (Ctrl+Enter 发送)" @keydown.ctrl.enter.prevent="onSend"
                @keydown.meta.enter.prevent="onSend" class="message-input" />
            <div class="input-actions">
                <el-button @click="onVoiceInput" :type="isRecording ? 'danger' : 'default'" circle>
                    <el-icon>
                        <Microphone />
                    </el-icon>
                </el-button>
                <el-button type="primary" @click="onSend" :disabled="!modelValue.trim() || isSending"
                    :loading="isSending" circle>
                    <el-icon>
                        <Promotion />
                    </el-icon>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { Microphone, Promotion } from '@element-plus/icons-vue';

const props = defineProps({
    modelValue: { // for v-model
        type: String,
        required: true
    },
    isSending: {
        type: Boolean,
        default: false
    },
    isRecording: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['update:modelValue', 'send', 'voice-input']);

const onSend = () => {
    emit('send');
};

const onVoiceInput = () => {
    emit('voice-input');
};
</script>

<style scoped>
.chat-input-area {
    padding: 10px 20px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
}

.input-container {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.message-input {
    flex-grow: 1;
}

.input-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 10px;
}
</style>